<?xml version="1.0" encoding="UTF-8"?>
<ui:decorate  template="/xhtml/plantillas/baseSeguridad.xhtml"
              xmlns:p="http://primefaces.org/ui"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:ui="http://java.sun.com/jsf/facelets">    

    <ui:define name="titulo">Pago Citas</ui:define>

    <ui:define name="java_script">
    </ui:define>   

    <ui:define name="contenido">

        <h:outputText value="#{label['adm.pago.citas']}" class="encabezado"/>        
        <hr id="horizontalLine" style="width: 770px; margin-left: 20px"/> 
        <h:panelGrid columns="10" class="panelFormulario" >
            <p:accordionPanel  style="margin-top: 20px; width: 770px" >  
                <p:tab title="Pago Cita">         

                    <p:fieldset legend="Detalle Pago">
                        <p:panelGrid>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['cliente']}" escape="false"/>
                                </p:column> 
                                <p:column>  
                                    <p:inputText id="id_cliente" value="#{beanPagoCitas.identificacion_c}" disabled="true"/>                                    
                                </p:column>
                                <p:column>                        
                                    <p:commandButton icon="ui-icon-info" title="Cliente" onclick="dcliente.show();"
                                                     type="button" style="margin-left: 10px">
                                    </p:commandButton>                                                     
                                </p:column>   
                                <p:column>  
                                    <p:inputText id="id_dsc_cliente" value="#{beanPagoCitas.dsc_cliente}"
                                                 style="width: 300px" disabled="true" rendered="#{beanPagoCitas.dsc_cliente eq null  ? false : true}"/>                                    
                                </p:column>                                                                
                            </p:row>                                                                                                               
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['especialidad']}" />               
                                </p:column>
                                <p:column>
                                    <p:column>  
                                    <p:inputText id="id_dsc_especialidad" value="#{beanPagoCitas.dsc_especialidad}"
                                                 style="width: 150px" disabled="true"/>                                    
                                </p:column> 
                                </p:column>
                            </p:row>
                             <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['estado']}" />               
                                </p:column>
                                <p:column>
                                    <p:column>  
                                    <p:inputText id="id_dsc_estado" value="#{beanPagoCitas.dsc_estado}"
                                                 style="width: 150px" disabled="true"/>                                    
                                </p:column> 
                                </p:column>
                            </p:row>
                             <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['plan.pago']}" />               
                                </p:column>
                                <p:column>
                                    <p:column>  
                                    <p:inputText id="id_dsc_planpago" value="#{beanPagoCitas.dsc_plan}"
                                                 style="width: 150px" disabled="true"/>                                    
                                </p:column> 
                                </p:column>
                            </p:row>                            
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['monto']}" />               
                                </p:column>
                                <p:column>
                                    <p:inputText id="id_pago_mensual" value="#{beanPagoCitas.monto}"  
                                                 style="width:150px; text-align: right" maxlength="11" disabled="#{beanPagoCitas.habilitar}"
                                                 onkeypress="javascript:return soloNumerosDecimales(event);"                                         >
                                        <f:converter converterId="NumeroConverter" />
                                        <f:attribute name="patron" value="#,##0.00"/>  
                                        <f:attribute name="maximoDigitos" value="8"/>  
                                        <p:ajax event="change" update="@this"/>
                                    </p:inputText>                                    
                                </p:column>
                            </p:row>   
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['tipo.pago']}" escape="false"/>
                                </p:column>                           
                                <p:column>
                                    <p:selectOneMenu id="id_tipo"  value="#{beanPagoCitas.tipo_pago}"
                                                     effect="fold" style="width: 150px">  
                                        <f:selectItem itemLabel="" itemValue=""  />  
                                        <f:selectItem itemLabel="Efectivo" itemValue="E" />  
                                        <f:selectItem itemLabel="Tarjeta" itemValue="T" />              
                                        <f:selectItem itemLabel="Cheque" itemValue="C" />              
                                    </p:selectOneMenu>                                     
                                </p:column>                    
                            </p:row>                            

                        </p:panelGrid>
                    </p:fieldset>                    
                    <p:column><p:commandButton value="Limpiar" icon="ui-icon-arrow-4-diag" action="#{beanPagoCitas.limpiarpago()}"
                                               update=":form_conci"  style="margin-left: 530px" /></p:column>                    
                    <p:column><p:commandButton value="Pagar"  icon="ui-icon-copy" action="#{beanPagoCitas.pagarCita()}"
                                               update=":form_conci" disabled="#{!beanPagoCitas.ocultar}"/></p:column>

                    <f:facet name="footer">             
                        <p:commandButton id="id_guardar" value="#{label['guardar']}"                                
                                         action="/xhtml/index" process="@this"/>                
                        <p:commandButton value="#{label['cancelar']}" action="/xhtml/index" process="@this" />    
                    </f:facet>            

                </p:tab>  
            </p:accordionPanel>  
        </h:panelGrid>        
        <p:fieldset legend="Lista de Citas" style="width: 755px" >
            <p:dataTable id="dataTable" var="cita" 
                         rows="5" value="#{beanPagoCitas.listado_modelo_citas}"                           
                         rowsPerPageTemplate="5,10,15" selectionMode="single" 
                         selection="#{beanPagoCitas.modelo_citas_tabla}"
                         rowKey="#{cita.id_cita}"
                         paginator="true"
                         filterEvent="enter"
                         paginatorPosition="bottom">  
                <p:ajax  event="rowSelect"  update=":form_conci" 
                         listener="#{beanPagoCitas.seleccionarCita()}"/>

                <p:column headerText="#{label['cliente']}" style="width: 200px; text-align: center" filterBy="#{cita.nombre_cliente}" filterMatchMode="contains">                      
                    <h:outputText value="#{cita.nombre_cliente}" />  
                </p:column>                 
                <p:column headerText="#{label['estado']}" style="width: 100px; text-align: center" filterBy="#{cita.dscEstado}" filterMatchMode="contains" filterOptions="" >                      
                    <h:outputText value="#{cita.dscEstado}" />  
                </p:column>
                <p:column headerText="#{label['especialidad']}" style="width: 100px; text-align: center" filterBy="#{cita.dscEspecialidad}" filterMatchMode="contains" filterOptions="" >                      
                    <h:outputText value="#{cita.dscEspecialidad}" />  
                </p:column>     
                <p:column headerText="#{label['fecha']}" style="width: 100px; text-align: center" filterBy="#{cita.fechareal}" filterMatchMode="contains" filterOptions="" >                      
                    <h:outputText value="#{cita.fechareal}" >
                        <f:converter converterId="DateConverter" />
                        <f:attribute name="patron" value="dd/MM/yyyy"/>  
                    </h:outputText>  
                </p:column>  
                <p:column headerText="#{label['estado.pago']}" style="width: 100px; text-align: center" filterBy="#{cita.estado_pago}" filterMatchMode="contains" filterOptions="" >                      
                    <h:outputText value="#{cita.dscEstadoPago}" />  
                </p:column>                                
            </p:dataTable>  
        </p:fieldset>
         

        <p:dialog id="id_lista_clientes" header="Lista de Clientes" widgetVar="dcliente" 
                  showEffect="clip" hideEffect="explode" modal="true" >  
            <p:dataTable id="dataTableClientes" var="usuario" style="width: 750px" 
                         rows="5" value="#{beanPagoCitas.listado_persona_cliente}"                           
                         rowsPerPageTemplate="5,10,15" selectionMode="single" 
                         selection="#{beanPagoCitas.persona_cliente_tabla}"
                         rowKey="#{usuario.identificacion}"
                         paginator="true"
                         filterEvent="enter"
                         paginatorPosition="bottom">  

                <p:ajax  event="rowSelect"  update=":form_conci" 
                         listener="#{beanPagoCitas.seleccionarCliente()}"/>

                <p:column headerText="Nombre" filterBy="#{usuario.nombre}" style="text-align: center" filterMatchMode="contains">                      
                    <h:outputText value="#{usuario.nombre}" />  
                </p:column>  

                <p:column headerText="Primer Apellido" filterBy="#{usuario.apellido1}" style="text-align: center" filterMatchMode="contains">                      
                    <h:outputText value="#{usuario.apellido1}" />  
                </p:column>  

                <p:column headerText="Segundo Apellido" filterBy="#{usuario.apellido2}"  style="text-align: center" filterMatchMode="contains">                      
                    <h:outputText value="#{usuario.apellido2}" />  
                </p:column>  

                <p:column headerText="Identificación" filterBy="#{usuario.identificacion}" style="text-align: center" filterMatchMode="contains">                      
                    <h:outputText value="#{usuario.identificacion}" />  
                </p:column>  
            </p:dataTable>              
        </p:dialog>   
    </ui:define>
</ui:decorate>
